@charset "utf-8";
@-webkit-keyframes fadeInscale{0%{opacity: 1;-webkit-transform: scale(1.2);-ms-transform: scale(1.2);transform: scale(1.2);}
100%{opacity: 1;-webkit-transform: scale(1);-ms-transform: scale(1);transform: scale(1);}}

@keyframes fadeInscale{0%{opacity: 1;-webkit-transform: scale(1.2);-ms-transform: scale(1.2);transform: scale(1.2);}
100%{opacity: 1;-webkit-transform: scale(1);-ms-transform: scale(1);transform: scale(1);}}
.fadeInscale{-webkit-animation-name: fadeInscale;animation-name: fadeInscale;transform-origin: 50% 50%;}

.banner{width: 100%;overflow: hidden;position: relative;}
.banner .swiper-slide{zoom: 1;vertical-align: middle;height:600px;overflow: hidden;position: relative;}
.banner .ban_bg{position: absolute;top: 0;right: 0;bottom: 0;width: 100%;height: 100%;background-position: center;background-size: cover;-webkit-transform: scale(1.2);-ms-transform: scale(1.2);transform: scale(1.2);}
.banner .ban_bg.animation{-webkit-animation: fadeInscale 2s;animation: fadeInscale 2s;-webkit-transform: scale(1);-ms-transform: scale(1);transform: scale(1);}
.banner .banner-pagination{bottom:60px;left: 0;width: 100%; }
.banner .layout{display: -webkit-box;display: -ms-flexbox;display: flex;display: -ms-flex;display: -moz-flex;display: -o-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;height: 100%;position: relative;}
.banner .swiper-pagination-bullet{width: 30px;height:6px;border-radius:6px;background-color: #fff;opacity: 0.3;margin: 0 5px;}
.banner .swiper-pagination-bullet-active{width: 30px;opacity: 1;position: relative;}
.banner .swiper-pagination-bullet-active:after{content: '';background-color: #fff;}

.banner  .box{position: relative;z-index: 2;flex: 1;  text-align:center; margin-bottom:65px}
.banner  .box .big{color: #fff; font-size:90px; line-height:150%;vertical-align:middle;display:block;  font-weight:bold; letter-spacing:24px; text-shadow:rgba(0,0,0,0.6) 1px 2px 3px}
.banner  .box .mtext{font-size:42px;color: #fff;line-height:180%; letter-spacing:3px;text-shadow: 1px 1px 1px rgba(60, 58, 59, .7); font-weight:bold; font-family:"宋体" }.banner  .box .small{ color: #fff; font-size:16px; line-height:150%;vertical-align:middle;display:block;font-family:Arial, Helvetica, sans-serif; letter-spacing:2px;text-transform:uppercase; }
.banner  .box .btn-link{ color:#333;font-size:16px; line-height:100%; padding:12px 24px;margin:24px 6px;   display:inline-block ; font-family:Arial, Helvetica, sans-serif;font-weight:bold;border-radius:60px; background:rgba(255,255,255,0.9)}

.banner .item{opacity: 0;}
.banner .item.animated{opacity: 1;}
.banner .number{position: absolute;bottom: 65px;left: 85px;font-weight: bold;font-family: Arial;font-size: 48px;color: #2262af;opacity: .22}
.banner .click_bot{position: absolute;top: 0;left: 0;width: 100%;height: 100%;  z-index:333}
.banner .ban_bg:after { position: absolute;  content: ""; width: 100%;top: 0; left: 0; height:20%;background: -webkit-linear-gradient(rgba(0, 0, 0,0.1), transparent);background: linear-gradient(rgba(0, 0, 0,0.1), transparent);   z-index: 3433;}


.foot-waves{overflow: hidden;position:absolute; bottom:0;height:60px; z-index:33; width:100%}
.foot-waves .wave-01,.foot-waves .wave-02{display: block;width: 2000%;height: 60px;background-position: 0  bottom;background-repeat: repeat-x}
.foot-waves .wave-01{position: absolute;left: 0;top: 0;background-image: url(../images/foot_wave_02.png);-webkit-animation: footWave 180s linear infinite;-o-animation: footWave 180s linear infinite;animation: footWave 180s linear infinite;}
.foot-waves .wave-02{position: absolute;left: 0;bottom: 0;background-image: url(../images/foot_wave_01.png);-webkit-animation: footWave 120s linear infinite forwards;-o-animation: footWave 120s linear infinite forwards;animation: footWave 120s linear infinite forwards;}



/*响应式*/
@media screen and (max-width:480px) {

.banner .swiper-slide{height:180px;}
.banner  .box{ margin-bottom:20px}
.banner  .box .big{font-size:36px;letter-spacing:2px;}
.banner  .box .mtext{font-size:16px; letter-spacing:0px;}
.banner  .box .small{  font-size:12px;letter-spacing:0px;display:none}
.banner  .box .btn-link{font-size:12px; padding:6px 12px;margin:12px 6px; display:none}
.banner .banner-pagination{bottom:18px; }
.foot-waves{height:30px; display:none}

}

@media screen and (min-width:481px) and (max-width:639px) {

.banner .swiper-slide{height:250px;}
.banner  .box{ margin-bottom:20px}
.banner  .box .big{font-size:36px;letter-spacing:2px;}
.banner  .box .mtext{font-size:16px; letter-spacing:0px;}
.banner  .box .small{  font-size:12px;letter-spacing:0px;}
.banner  .box .btn-link{font-size:12px; padding:6px 12px;margin:12px 6px; display:none}
.banner .banner-pagination{bottom:18px; }


}
@media screen and (min-width:640px) and (max-width: 1080px) {

.banner .swiper-slide{height:320px;}
.banner  .box{ margin-bottom:20px}
.banner  .box .big{font-size:60px;letter-spacing:2px;}
.banner  .box .mtext{font-size:24px; letter-spacing:0px;}
.banner  .box .small{  font-size:14px;letter-spacing:0px;}
.banner  .box .btn-link{font-size:12px; padding:6px 12px;margin:12px 6px; display:none}
.banner .banner-pagination{bottom:18px; }



}

@media screen and (min-width:1081px) and (max-width: 1200px) {
.banner .swiper-slide{height:500px;}


}

@media screen and (min-width:1201px) and (max-width: 1440px) {


}

@media screen and (min-width:1441) and (max-width: 1690px){


 
}









